<template>
  <div class="app-container" v-loading="pageLoading">
    <el-button type="primary" class="fr" @click="exportData" :loading="exportLoading">
      导出</el-button>
    <div class="filter-container" style="flex-wrap: wrap">
      <el-date-picker class="filter-item" style="width: 230px;" v-model="query.queryString.daterange" type="daterange"
        value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="datePickerOption">
      </el-date-picker>
      <el-select class="filter-item" style="width: 230px;" v-model="query.queryString.line" placeholder="选择线别"
        filterable clearable>
        <el-option v-for="(item,index) in options.line" :key="index" :value="item.id" :label="item.line_name">
        </el-option>
      </el-select>
      <el-input class="filter-item" style="width: 230px;" clearable v-model="query.queryString.sku"
        placeholder="产品型号编码"></el-input>
      <el-input class="filter-item" style="width: 230px;" clearable v-model="query.queryString.mo" placeholder="工单号">
      </el-input>
      <!-- <el-input class="filter-item" style="width: 230px;" clearable v-model="query.queryString.sn" placeholder="流水号">
      </el-input> -->
      <el-select class="filter-item" style="width: 230px;" v-model="query.queryString.group" placeholder="选择工序"
        filterable clearable>
        <el-option v-for="(item,index) in options.group" :key="index" :value="item.id" :label="item.group_name">
        </el-option>
      </el-select>
      <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
      <el-button class="filter-item" type="warning" plain @click="reset">重置</el-button>
    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="columns">
      <template v-slot:content="v">
        <span v-if="v.key == 'sn_qty'"><a href="#" class="text-blue text-bold"
            @click.stop="goDetail(v.row)">{{v.row[v.key]}}</a></span>
        <span v-else>{{ v.row[v.key] }}</span>
      </template>
    </z-table>
    <pagination v-show="total>0" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @pagination="getList" />
  </div>
</template>

<script>
import { arrayToObject, dateTools, deepClone } from '@/utils'
import Pagination from '@/components/Pagination'
import zTable from '@/views/_common/table'
import dayjs from 'dayjs'

const emptyData = {}
const defaultQurey = {}
// const statusArry = {0: '未上线', 1: '已上线', 2: '生产中', 3: '已完成'}
// const statusClass = {0: 'bg-red', 1: 'bg-yellow', 2: 'bg-blue', 3: 'bg-green'}

export default {
  name: 'wipReport',
  components: { Pagination, zTable },
  data: function () {
    return {
      name: '在制品分布',
      api: this.$api.wipReport,
      pageLoading: false,
      exportLoading: false,
      query: {
        page: 1,
        size: 10,
        queryString: { ...defaultQurey },
      },
      list: [],
      exprotList: [],
      total: 0,
      options: { line: [], group: [] },
      datePickerOption: {
        shortcuts: [
          {
            text: '最近30天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '当月',
            onClick(picker) {
              let today = dateTools.FormatDate()
              const end = today
              const start = dateTools.first_day(today)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '上月',
            onClick(picker) {
              let today = dateTools.FormatDate()
              const start = dateTools.first_day(dateTools.add_month(today, -1))
              const end = dateTools.last_day(start)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '上上月',
            onClick(picker) {
              let today = dateTools.FormatDate()
              const start = dateTools.first_day(dateTools.add_month(today, -2))
              const end = dateTools.last_day(start)
              picker.$emit('pick', [start, end])
            },
          },
        ],
      },
      tableProps: {
        border: true,
        hideOperations: true,
      },
      columns: [
        { title: '工单号', key: 'mo_no', width: 140 },
        { title: '最后线体', key: 'line_name', width: 120 },
        { title: '最后工序', key: 'group_name', width: 120 },
        { title: '序号数量', key: 'sn_qty', width: 80 },
        { title: '产品数量', key: 'batch_qty', width: 80 },
        { title: '机种编码', key: 'model_code', width: 120 },
        { title: '机种名称', key: 'model_name', width: 150 },
        { title: '产品型号编码', key: 'sku_no', width: 100 },
        { title: '产品型号名称', key: 'sku_name', width: 120 },
        { title: '产品规格', key: 'sku_spec' },
      ],
    }
  },
  methods: {
    getList() {
      this.pageLoading = true
      this.$request(this.api, this.formatQuery(this.query))
        .then((r) => {
          console.info(r)
          this.pageLoading = false
          this.list = this.formatData(r.list)
          this.total = r.total
        })
        .catch(() => {
          this.pageLoading = false
        })
    },
    research() {
      this.query.page = 1
      this.total = 0
      this.list = []
      this.getList()
    },
    reset() {
      this.query.page = 1
      this.query.queryString = { ...defaultQurey }
      this.total = 0
      this.list = []
      this.getList()
    },
    formatQuery(query, nopage = false) {
      let tmp = deepClone(query)
      if (tmp.queryString.daterange) {
        tmp.queryString.start = tmp.queryString.daterange[0]
        tmp.queryString.end = tmp.queryString.daterange[1]
        delete tmp.queryString.daterange
      }
      if (nopage) {
        delete tmp.page
      }
      return tmp
    },
    formatData(data) {
      return data.map((item) => {
        let tmp = { ...item }
        // tmp.statusClass = 'text-label ' + statusClass[tmp.mo_status]
        // tmp.mo_status = statusArry[tmp.mo_status]
        return tmp
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          if (j === 'timestamp') {
            return parseTime(v[j])
          } else {
            return v[j]
          }
        }),
      )
    },
    exportData() {
      let url = this.api
      let query = this.formatQuery(this.query, true)
      query.page = 1
      query.size = 99999
      this.exportLoading = true
      this.$request(url, query)
        .then((r) => {
          var exprotList = this.formatData(r.list)
          import('@/vendor/Export2Excel').then((excel) => {
            const filterVal = this.columns.map((item) => {
              return item.key
            })
            const tHeader = this.columns.map((item) => {
              return item.title || item.key
            })
            const data = exprotList.map((v) => filterVal.map((j) => v[j]))
            excel.export_json_to_excel({
              header: tHeader,
              data,
              filename: this.name + '_' + dayjs().format('YYYYMMDD'),
            })
          })
        })
        .finally(() => {
          this.exportLoading = false
        })
    },
    goDetail(row) {
      this.$store.dispatch('delView', { name: 'wipDetailReport' }).then((r) => {
        this.$router
          .push({
            name: 'wipDetailReport',
            params: {
              sn: row.mo_no,
              group: row.group_id,
            },
          })
          .catch(() => {})
      })
    },
    fetchParams() {
      this.query.queryString = Object.assign({}, this.query.queryString, this.$route.params)
    },
  },
  created: function () {
    this.fetchParams()
    this.getList()
    this.$request(this.$api.line + 'getlistbypage', { page: 1, size: 999 }).then((r) => {
      this.options.line = r.list
    })
    this.$request(this.$api.group + 'getlist', { mes_flag: 'Y' }).then((r) => {
      this.options.group = r
    })
  },
}
</script>

<style scoped>
</style>
